
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册 - EOS链</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/css/weui.min.css">
    <link rel="stylesheet" href="/css/jquery-weui.min.css">
    <script src="http://p1es6zzx0.bkt.clouddn.com/TCaptcha.js"></script>
    <style>
        body{

            background-image: linear-gradient(to bottom,#14EBE8,#23E1B9);
            background-position: top;
            background-repeat: repeat-x,no-repeat;
            /*background-image: url(\static\src\page_back.png);*/
        }
        html{
            border-color:red;
        }
        .body_bg{
            width: 100%;
            background-image: url(/img/page_back.png);
            background-size: 100% 100%;
            position: fixed;
            height:100%;
            bottom: 0;
            z-index:-1;
        }


        .back{
            width: 100%;
            height: 100%;
            border : 0;
            background-color: rgba(0,0,0,0);
        }
        .logo{
            padding-bottom: 0px;
            height:85px;
            margin: 0 auto;
            text-align: center;
        }
        .logo img{
            margin-top: 10px;
            height:35px;
        }
        .logo p{
            margin-top: 5px;
            font-size: 12px;
            line-height: 10px;
        }
        .weui-cells{
            margin-top:10px;
            border-radius: 15px 15px 15px 15px;
            width:90%;
            margin: 0 auto;
            position:static;
            font-size: 16px;
            padding-bottom: 10px;
            z-index:1;
        }
        .icon_bg{
            float: right;
            height:35px;
            width:35px;
            background:url(/img/back.png) no-repeat;
            position: relative;
            bottom: 35px;
        }
        .weui-cells_b{
            margin-top:20px;
            height:15px;
            border-radius: 15px 15px 0px 0px;
            width:84%;
            margin: 0 auto;
            opacity:1;
            background-color: #D1FBFA;
        }
        .panel{

            border-radius: 15px 15px 15px 15px;
            width:85%;
            margin: 0 auto;
            background-color:rgba(209,251,250,0.4);
            margin-bottom: 30px;
        }
        .panel .title{
            padding-top:20px;
            padding-left:20px;
            font-size: 16px;
            color:#fff;
        }
        .panel .content{
            color: #e1fffb;
            font-size:14px;
            padding-top:10px;
            padding-left:20px;
            padding-right:10px;
            font-weight: lighter;
        }
        .weui-cells p{
            text-align: center;
            color:#858585;
            margin-bottom: 10px;
        }
        .weui-cells p a{
            text-align: center;
            color:#858585;
            margin-bottom: 10px;
        }
        .weui-cell{
            position:static;
        }
        .weui-label{
            width:80px;
            text-align: center;
        }
        .weui-btn_primary{
            width:60%;
            border-radius:20px 20px 20px 20px;
            background-image: linear-gradient(to bottom right,#21E5C3,#21E5C3);
            height:40px;
            line-height: 40px;
            border:0;
            position:static;
        }
        .lable{
            padding-top: 10px;
            width:100%;
            text-align: center;
            font-size: 150%;
        }
        .line{
            width: 87%;
            height: 2px;
            background-image: linear-gradient(to bottom right,#F5F4F7,#F5F4F7);
            margin: 0 auto;
            margin-top:10px;
            margin-bottom:10px;
        }
        .weui-footer{
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
        }
        .weui-vcode-img{
            height: 35px;
        }
        .weui-vcode-btn{
            margin-top: 10px;
            border:0.5px solid;
            border-radius:20px 20px 20px 20px;
            line-height: 25px;
            font-size: 13px;
            height : 28px;
            margin-right: 30px;
            color: #fff;
            background-color: #21E5C2;
        }
        input::-webkit-input-placeholder {
            color: #cbcdcd;/*d8d9d9*/
        }
        .weui-btn:after{
            width:auto;
            height:auto;
        }
        #login{
            margin-top: 20px;
            border:0.5px solid;
            border-radius:20px 20px 20px 20px;
            line-height: 25px;
            font-size: 18px;
            height : 40px;
            margin: 0 auto;
            border-width: 1.5px;
            background-color: rgba(255,255,255,0.2);
            border-color: #21E5C2;
            color:#21E5C2;
            width: 60%;
            text-align: center;
        }
        .weui-cells:after{
            border:0;
        }
        .tcaptcha-transform{
            display: none;
        }
        #t_verify{
            display: none;
        }
    </style>
</head>
<body>
<div id="back" class="back">

    <br>
    <div class="weui-cells_b weui-cells_form">
    </div>
    <div class="weui-cells weui-cells_form">
        <div class="lable"><div class="logo">
            <img class="logo" src="/img/logo121.png"/>
            <p>EOS链糖果token 完全免费分发</p>
        </div></div>
        <div class="weui-cell" style="margin-top:10px;">
            <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
            <div class="weui-cell__bd">
                <input id="phone" class="weui-input" type="number"  placeholder="请输入手机号">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">密&nbsp;&nbsp;&nbsp;码</label></div>
            <div class="weui-cell__bd">
                <input id="password" class="weui-input" type="password"  placeholder="请输入密码">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">密&nbsp;&nbsp;&nbsp;码</label></div>
            <div class="weui-cell__bd">
                <input id="n_password" class="weui-input" type="password"  placeholder="确认密码">
            </div>
        </div>
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
            <div class="weui-cell__bd">
                <input id="code" class="weui-input" type="number" placeholder="请输入验证码">
            </div>
            <div class="weui-cell__ft" style="padding:10px">
                <img class="weui-vcode-img" src="/code/image?width=70" onclick="this.src='/code/image?width=70&v='+Math.random()">
            </div>
        </div>
        <!--
        <div class="weui-cell weui-cell_vcode" style="margin-bottom: 20px">
            <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
            <div class="weui-cell__bd" style="width:80%;">
                <input id="p_code"  class="weui-input" type="number" placeholder="输入验证码">
            </div>
            <div class="weui-cell__ft" style="height: 45px;">
                <button id="sendcode" class="weui-vcode-btn">获取验证码</button>
            </div>
        </div>
        -->

        <br>
        <button style="display: none;" id="TencentCaptcha"
                data-appid="2029093851"
                data-cbfn="callback"
        >验证</button>
        <input id="ticket" type="hidden"/>
        <input id="randstr" type="hidden"/>

        <a id="reg" href="javascript:;" style="" class="weui-btn weui-btn_primary">注&nbsp;&nbsp;&nbsp;册</a>

        <div class="line"></div>
        <p style="text-align: center;font-size: 14px">已有账号点击
            <br>
        </p>
        <p style="margin-bottom:-20px;">
            <button onclick="window.location.href='/'" id="login" class="weui-vcode-btn">登&nbsp;&nbsp;&nbsp;录</button>
        </p>
        <img style="float: right" width="50px" src="/img/back.png"/>

    </div>
    <br>
    <div class="panel">
        <p class="title"><font style="color: #1CE7D3"> | </font>关于EOS链</p>
        <p class="content">100亿EOS链全球免费分发，未来可兑换EOS，真正去中心化，人人可持有的token，无需付出经济成本，注册和邀请均能得到，币圈自媒体人或者群主可添加微信：EOSlian2，加入合作赠送EOS。
            <br><br>
        </p>
    </div>
    <div class="weui-footer " style="position: static">
        <p class="weui-footer__text" style="color:#fff">Copyright © 2018 EOSLIAN.net</p>
        <p style="height: 10px"></p>
    </div>

</div>
<div class="body_bg" style="border: 0">

</div>
<input type="hidden" id="invite" th:value="${invitorId}">



<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-weui.min.js"></script>
<script>
    var width = window.innerWidth;
    var height = $(document).height();
    var is_varify = false;
    var css_timer;
    $("body").css("width",width);

    function fixCss(){
        css_timer = setInterval(function(){
            if($(".tcaptcha-transform").length > 0) {
                console.log('1');
                $("#tcaptcha_iframe").css("transform","scale(0.7)");
                $("#tcaptcha_iframe").css("width","123%");
                $("#tcaptcha_iframe").css("margin","-12% 0px 0px -12%");
                $("#tcaptcha_iframe").css("display","block");
                $("#tcaptcha_popup").css("transform","scale(0.7)");

                $("#tcaptcha_popup").css("margin","-12% 0px 0px -12%");
                $("#tcaptcha_popup").css("display","block");
                $("#tcaptcha_popup").css("margin-top","0%");
                $("#tcaptcha_popup").css("margin-left","20%");
                $(".tcaptcha-transform").css("border-radius","13px");
                $(".tcaptcha-transform").css("width","76%");
                $(".tcaptcha-transform").css("height","320px");
                $(".tcaptcha-transform").css("left","12%");
                $(".tcaptcha-transform").css("border-radius","13px");
                $(".tcaptcha-transform").css("display","block");

                window.clearInterval(css_timer);
            }
        },100);
    }


    window.callback = function(res){
        console.log(res)
        // res（未通过验证）= {ret: 1, ticket: null}
        // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
        if(res.ret === 0){
            is_varify = true;
            $("#ticket").val(res.ticket);
            $("#randstr").val(res.randstr);
            $("#reg").trigger("click");
        }else{

        }
    }
    $(".back").css("width",width);


    $(document).ready(function(){
        var clock = '';
        var nums = 60;
        function doLoop() {
            nums--;
            if (nums > 0) {
                $('#sendcode').text(nums + '秒后获取');
            } else {
                clearInterval(clock); //清除js定时器
                $('#sendcode').attr("disabled", false);
                $('#sendcode').text('点击发送验证码');
                nums = 60; //重置时间
            }
        }


        $("#sendcode").click(function(){
            if(is_varify){
                var phone = $("#phone").val();
                var ticket = $("#ticket").val();
                var randstr = $("#randstr").val();
                var code = $("#code").val;
                if(!phone){
                    $.toptip('请输入手机号', 2000, 'warning');  //设置显示时间
                    return false;
                }

                $.ajax({
                    url:'/base/user/getpcode',
                    type:'post',
                    data: {
                        phone:phone,
                        ticket:ticket,
                        randstr:randstr,
                        code:code
                    },
                    async : true, //默认为true 异步
                    dataType: 'json',
                    success:function(data){
                        if(data.code == 0){
                            $('#sendcode').attr("disabled",true);
                            $("#sendcode").text(nums+'秒后获取')
                            clock = setInterval(doLoop, 1000); //一秒执行一次
                            $.toptip('短信已经发送到您的手机', 2000, 'success');  //设置显示时间
                        }else{
                            is_varify = false;
                            $.toptip(data.msg, 2000, 'warning');  //设置显示时间
                        }
                    }
                });
            }else{
                $("#TencentCaptcha").trigger("click");
                fixCss();
            }

        });
    });



    $(document)


        $("#reg").click(function(){
            var phone = $("#phone").val();
            var password = $("#password").val();
            var n_password = $("#n_password").val();
            var ticket = $("#ticket").val();
            var randstr = $("#randstr").val();
            var invite = $("#invite").val();
            var code = $("#code").val();
            if (!phone) {
                $.toptip('请输入手机号', 2000, 'warning');  //设置显示时间
                return false;
            }
            if (!password) {
                $.toptip('请输入登录密码', 2000, 'warning');  //设置显示时间
                return false;
            }
            if (password != n_password) {
                $.toptip('请输入相同的登录密码', 2000, 'warning');  //设置显示时间
                return false;
            }
            if(is_varify) {
                $.ajax({
                    url: '/signUp',
                    type: 'post',
                    data: {
                        mobile: phone,
                        password: password,
                        invitorId: invite,
                        ticket:ticket,
                        randstr:randstr,
                        imageCode:code
                    },
                    async: true, //默认为true 异步
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 0) {
                            $.toptip('注册成功！', 2000, 'success');  //设置显示时间
                            setTimeout("this.location.href= '/'", 1000);
                        } else {
                            $.toptip(res.data, 2000, 'warning');  //设置显示时间
                            is_varify = false;
                        }
                    }
                });
            }else{
                $("#TencentCaptcha").trigger("click");
                fixCss();
            }

        })

</script>
</body>
</html>